<template>
  <el-card class="introduce">
    <div class="order">
      <el-card class="order-item">
        <template #header>
          <div class="card-header">
            <span>订单总数</span>
          </div>
        </template>
        <div class="item">828</div>
      </el-card>
      <el-card class="order-item">
        <template #header>
          <div class="card-header">
            <span>商品总数</span>
          </div>
        </template>
        <div class="item">3271</div>
      </el-card>
      <el-card class="order-item">
        <template #header>
          <div class="card-header">
            <span>转化率（订单总数/商品总数）</span>
          </div>
        </template>
        <div class="item">25.31%</div>
      </el-card>
    </div>
    <div id="zoom"></div>
  </el-card>
</template>

<script>

let chart = null
export default {
  name: 'Index',
  mounted () {
    if (window.echarts) {
      // 基于准备好的dom，初始化echarts实例
      chart = window.echarts.init(document.getElementById('zoom'))

      // 指定图表的配置项和数据
      const option = {
        title: {
          text: '系统折线图'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
         
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['月订单数', '总用户数', '总订单数', '总商品数', '总销售额']
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
          
            boundaryGap: false,
            data: ['2021年1月', '2021年2月', '2021年3月', '2021年4月', '2021年5月', '2021年6月']
          }
        ],
        yAxis: [
          {
            type: 'value'
            
          }
        ],
        series: [
          {
            name: '月订单数',
            type: 'line',
            
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [15, 25, 6, 11, 10, 34]
          },
          {
            name: '总用户数',
            type: 'line',
            
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [120, 182, 191, 234, 290, 330]
          },
          {
            name: '总订单数',
            type: 'line',
            
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [150, 232, 201, 154, 190, 330]
          },
          {
            name: '总商品数',
            type: 'line',
            
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [320, 332, 301, 334, 390, 330]
          },
          {
            name: '总销售额',
            type: 'line',
            
            label: {
              show: true,
              position: 'top'
            },
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [1.20, 23.22, 3.01, 2.34, 74.50, 24.30]
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表。
      chart.setOption(option)
    }
  },
  destroyed () {
    chart.dispose()
  }
}
</script>

<style scoped>
.introduce .order {
  display: flex;
  margin-bottom: 50px;
}

.introduce .order .order-item {
  flex: 1;
  margin-right: 20px;
}

.introduce .order .order-item:last-child {
  margin-right: 0;
}

#zoom {
  min-height: 300px;
}
</style>